<template>
  <div style="background: white;width: 1700px;height: 725px;margin: 0px auto">
    <div class="el-buttonbox" style="display: flex;  justify-content: flex-end; padding-top: 20px; margin-right: 30px;">
      <el-button type="primary" @click="AddList()">新增站点</el-button>
      <el-button type="primary" @click="zdList()">站点信息</el-button>
    </div>
    <!--左侧站点列表-->
    <div
      style="float: left;display: inline-block;width: 372px;height: 650px;border: 1px solid rgb(220, 222, 226);margin-top: 40px;margin-left: 20px">
      <div style="display:inline-block;margin-left: 30px;margin-top: 30px">
        <span style="font-size: 14px;">输入搜索：</span>
        <el-input style="width: 200px"></el-input>
      </div>
      <div style="display: inline-block;width: 100%;margin-top: 15px">
        <el-table
          :data="tableData"
          style="width: 100%"
          @row-click="showMap"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="站点名称" style="width: 100%;">
                  <span>{{ props.row.siteName }}</span>
                </el-form-item>
                <el-form-item label="所属区域" style="width: 100%;">
                  <span>{{ props.row.area }}</span>
                </el-form-item>
                <el-form-item label="站点地址" style="width: 100%;">
                  <span>{{ props.row.siteAddress }}</span>
                </el-form-item>
                <el-form-item label="区域负责人" style="width: 100%;">
                  <span>{{ props.row.areaResponsible }}</span>
                </el-form-item>
                <el-form-item label="联系方式" style="width: 100%;">
                  <span>{{ props.row.areaResponsiblePhone }}</span>
                </el-form-item>
                <el-form-item label="站点负责人" style="width: 100%;">
                  <span>{{ props.row.siteResponsible }}</span>
                </el-form-item>
                <el-form-item label="联系方式" style="width: 100%;">
                  <span>{{ props.row.siteResponsiblePhone }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="站点名称"
            prop="siteName">
          </el-table-column>
          <!--          <el-table-column>-->
          <!--            <template-->
          <!--              slot="header" slot-scope="scope">-->
          <!--              <el-button type="primary" @click="AddList()" size="mini">新增站点</el-button>-->
          <!--              <el-button type="primary" @click="AddList()" size="mini">站点信息</el-button>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
      </div>
    </div>
    <!--    <el-dialog-->
    <!--      title="新增站点"-->
    <!--      :visible.sync="dialogVisible_newSite"-->
    <!--      width="30%"-->
    <!--      append-to-body-->
    <!--      >-->
    <!--      <el-form :model="tableData_site">-->
    <!--        <el-form-item label="站点名称:">-->
    <!--          <el-input style="width: 50%" v-model="tableData_site.name" placeholder="输入站点名称"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="站点名称:">-->
    <!--          <el-input style="width: 50%" v-model="tableData_site.name"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="站点名称:">-->
    <!--          <el-input style="width: 50%" v-model="tableData_site.name"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="站点名称:">-->
    <!--          <el-input style="width: 50%" v-model="tableData_site.name"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="站点名称:">-->
    <!--          <el-input style="width: 50%" v-model="tableData_site.name"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="站点名称:">-->
    <!--          <el-input style="width: 50%" v-model="tableData_site.name"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="站点名称:">-->
    <!--          <el-input style="width: 50%" v-model="tableData_site.name"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="站点名称:">-->
    <!--          <el-input style="width: 50%" v-model="tableData_site.name"></el-input>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--    <el-button @click="dialogVisible_newSite = false">取 消</el-button>-->
    <!--    <el-button type="primary" @click="dialogVisible_newSite = false">确 定</el-button>-->
    <!--  </span>-->
    <!--    </el-dialog>-->
    <!--右侧地图-->
    <div id="map-container"
         style="float: right;display: inline-block;width: 1190px;height: 650px;border: 1px solid rgb(220, 222, 226);margin-left: 40px;margin-top: 40px;">
    </div>
  </div>
</template>

<script>
import AMap from "AMap";
import axios from "axios";

var map, marker;
export default {
  //import引入的组件需要注入到对象中才能使用",
  components: {},
  data() {
    return {
      dialogVisible_newSite: false,
      tableData_site: {
        account: "",
        area: "",
        areaName: "",
        areaResponsible: "",
        areaResponsibleId: 0,
        areaResponsiblePhone: "",
        contract: "",
        createOnTime: "",
        createOnUserId: 0,
        createOnUserName: "",
        id: 0,
        jingdu: "",
        legalPerson: "",
        legalpersonPhone: "",
        password: "",
        siteAddress: "",
        siteName: "",
        siteNumber: "",
        siteResponsible: "",
        siteResponsiblePhone: "",
        status: 0,
        weidu: "",
        xianzhaozhaopian: "",
        yingyezhizhao: ""
      },
      //站点列表数据
      tableData: [],
      arriveCoor: [108.947025, 34.2613255],//定位坐标
      arrive: "宝应站",//具体信息
    };
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    //获取数据
    getList() {
      axios("/JX_java/afferSale/site/getSiteList").then((res) => {
        this.tableData = res.data.data
        console.log(this.tableData)
        // dizhiArr.push(this.tableData.jingdu.split(',')[0]);
        // dizhiArr.push(this.tableData.jingdu.split(',')[1]);

        localStorage.setItem("listDataArr", JSON.stringify(this.tableData));
      })
    },
    showMap(row) {
      let diziArr = []
      diziArr.push(row.jingdu.split(',')[0]);
      diziArr.push(row.jingdu.split(',')[1]);
      this.arriveCoor=diziArr;
      this.mapDraw(this.arriveCoor);
      this.addMarker(this.arriveCoor)
      console.log(row,111111111111111)

    },
    mapDraw(arriveCoor) {
      map = new AMap.Map('map-container', {   //map-location是嵌地图div的id
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 16, //初始化地图层级
        center: arriveCoor //初始化地图中心点
      });
      // 定位点
      this.addMarker(arriveCoor);
    },
    addMarker(arriveCoor) {
      marker = new AMap.Marker({
        icon: "",  //图片ip
        imageSize: "20px",
        position: new AMap.LngLat(arriveCoor[0], arriveCoor[1]),
        offset: new AMap.Pixel(-13, -30),
        // 设置是否可以拖拽
        draggable: false,
        cursor: 'move',
        // 设置拖拽效果
        raiseOnDrag: true
      });
      marker.setMap(map);
    },
    AddList() {
      this.$router.push("/StationServiceAdd");
    },
    zdList() {
      this.$router.push("/StationServiceXx");
    },
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.getList(0)
  },
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {

  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {
    this.mapDraw(this.arriveCoor)
  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {

  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {

  },
  //生命周期 - 销毁之前",
  beforeDestroy() {

  },
  destroyed() {

  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {

  },
}
</script>
<style lang="scss" scoped>
.el-buttonbox {
  display: flex;
  align-items: flex-end;
}

//.el-button span {
//  /*text-align: center;*/
//  margin-right: 10px;
//}

</style>
